<template>
  <div class="settings">
    <div class="settings-sidebar">
      <div class="sidebar-header">
        <h3>系统设置</h3>
      </div>

      <div class="settings-nav">
        <div
          v-for="section in sections"
          :key="section.id"
          class="nav-item"
          :class="{ active: currentSection === section.id }"
          @click="currentSection = section.id"
        >
          <span class="nav-icon">{{ section.icon }}</span>
          <span class="nav-label">{{ section.label }}</span>
        </div>
      </div>
    </div>

    <div class="settings-main">
      <!-- Apple ID 设置 -->
      <AppleIDSettings v-if="currentSection === 'appleid'" />

      <!-- 通用设置 -->
      <GeneralSettings v-else-if="currentSection === 'general'" />

      <!-- 壁纸设置 -->
      <WallpaperSettings v-else-if="currentSection === 'wallpaper'" />

      <!-- 显示器设置 -->
      <div v-else-if="currentSection === 'display'" class="settings-content">
        <div class="content-header">
          <h2>显示器</h2>
          <p class="content-description">调整分辨率、亮度和颜色</p>
        </div>

        <div class="setting-group">
          <div class="setting-item">
            <label class="setting-label">分辨率</label>
            <select class="setting-select">
              <option>1920 × 1080</option>
              <option>2560 × 1440</option>
              <option>3840 × 2160</option>
            </select>
          </div>

          <div class="setting-item">
            <label class="setting-label">亮度</label>
            <input type="range" class="setting-slider" min="0" max="100" value="80" />
          </div>

          <div class="setting-item">
            <label class="setting-label">夜览</label>
            <label class="toggle-switch">
              <input type="checkbox" />
              <span class="toggle-slider"></span>
            </label>
          </div>
        </div>
      </div>

      <!-- 占位内容 -->
      <div v-else class="settings-content">
        <div class="content-header">
          <h2>{{ sections.find(s => s.id === currentSection)?.label }}</h2>
          <p class="content-description">此设置正在开发中</p>
        </div>
        <div class="placeholder">
          <div class="placeholder-icon">⚙️</div>
          <p>功能即将推出</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AppleIDSettings from './AppleIDSettings.vue'
import GeneralSettings from './GeneralSettings.vue'
import WallpaperSettings from './WallpaperSettings.vue'

const currentSection = ref('appleid')

const sections = [
  { id: 'appleid', label: 'Apple ID', icon: '👤' },
  { id: 'general', label: '通用', icon: '⚙️' },
  { id: 'wallpaper', label: '墙纸', icon: '🖼️' },
  { id: 'display', label: '显示器', icon: '🖥️' },
  { id: 'sound', label: '声音', icon: '🔊' },
  { id: 'network', label: '网络', icon: '🌐' },
  { id: 'bluetooth', label: '蓝牙', icon: '📡' },
  { id: 'privacy', label: '隐私', icon: '🔒' },
  { id: 'battery', label: '电池', icon: '🔋' },
]
</script>

<style src="./settings.css"></style>

